<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui"
	template="/templates/template.xhtml" xmlns:fb="http://ogp.me/ns/fb#">



	<ui:define name="body">
		<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1&amp;appId=451972461505194";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

		<div id="fb-root">
			<fb:like href="www.teste.com.br" send="false" layout="button_count" width="450" show_faces="true"
				font="lucida grande" />
		</div>
		<h:form prependId="false" id="form">
			<p:panel>

				<div align="center">
					<h:panelGrid columns="3" columnClasses="coluna20,coluna20,coluna60">
						<h:outputText value="Local:" />
						<p:inputText value="#{principalBean.local}" size="60" maxlength="255" />
						<p:commandButton value="Buscar" action="#{principalBean.pesquisarEndereco}" process="@form" update="@form" />
					</h:panelGrid>
					<br />
					<h:panelGrid rendered="#{!empty principalBean.listaLocais}" width="100%">
						<p:selectOneListbox id="scroll" value="#{principalBean.coordenadas}" style="height:150px;width:100%">
							<f:selectItems value="#{principalBean.listaLocais}" />
							<p:ajax listener="#{principalBean.pesquisarEndereco}" event="change" process="@form" update="@form" />
						</p:selectOneListbox>
					</h:panelGrid>
					<br />

					<h:panelGrid id="panelGmap" rendered="#{!empty principalBean.coordenadas}">
						<p:gmap center="#{principalBean.coordenadas}" zoom="16" type="HYBRID" style="width:800px;height:600px"
							model="#{principalBean.circleModel}"> >
						<p:ajax event="pointSelect" listener="#{principalBean.onPointSelect}" oncomplete="popUp.show();" update="idPopUp" />
							<p:ajax event="overlaySelect" listener="#{principalBean.onCircleSelect}" oncomplete="popUpVisu.show()"
								update="idPopUpVisu" />
						</p:gmap>
					</h:panelGrid>
				</div>

				<p:dialog appendToBody="false" modal="false" widgetVar="popUp" id="idPopUp" width="500" height="300">
					<h:panelGrid width="100%" id="panelOcorrencia" columns="2" columnClasses="coluna20,coluna80">
						<h:outputText value="Latitude:" />
						<h:outputText value="#{principalBean.ocorrencia.latitude}" />
						<h:outputText value="Longitude:" />
						<h:outputText value="#{principalBean.ocorrencia.longitude}" />
						<h:outputText value="Ocorrência:" />
						<p:inputTextarea autoResize="false" cols="40" rows="4" value="#{principalBean.ocorrencia.observacao}" />
					</h:panelGrid>

					<p:commandButton value="Salvar" action="#{principalBean.save}" update=":form:panelGmap,panelOcorrencia"
						onclick="popUp.hide();" />
				</p:dialog>
				<p:dialog appendToBody="true" modal="true" widgetVar="popUpVisu" id="idPopUpVisu" width="500" height="300">
					<h:panelGrid width="100%" columns="2" columnClasses="coluna20,coluna80">
						<h:outputText value="Latitude:" />
						<h:outputText value="#{principalBean.ocorrenciaVisu.latitude}" />
						<h:outputText value="Longitude:" />
						<h:outputText value="#{principalBean.ocorrenciaVisu.longitude}" />
						<h:outputText value="Ocorrência:" />
						<h:outputText value="#{principalBean.ocorrenciaVisu.observacao}" />
					</h:panelGrid>
				</p:dialog>
				<p:lightBox iframe="true">
					<h:outputLink value="http://www.primefaces.org" title="PrimeFaces HomePage">
						<h:outputText value="teste" />
					</h:outputLink>
				</p:lightBox>
			</p:panel>
		</h:form>
	</ui:define>
</ui:composition>